<template>
    <div class="table-container">
        <el-row type="flex" justify="space-between">
            <el-col :span="8" style="margin-bottom:20px;">
                <el-button-group>
                    <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
                    <el-button type="primary" icon="el-icon-edit" @click="handleUpdate">修改</el-button>
                    <el-button type="primary" icon="el-icon-search">查看</el-button>
                    <el-button type="primary" icon="el-icon-delete">删除</el-button>
                </el-button-group>
            </el-col>
            <el-col :span="16" style="margin-bottom:20px;">
                <el-row type="flex" justify="space-between">
                    <el-col :span="6">
                        <el-select v-model="search" class="filter-item" placeholder="Please select">
                            <el-option v-for="item in selectdata" :key="item.code" :label="item.name" :value="item.code"/>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-input
                            v-model="search"
                            placeholder="请输入搜索内容"
                            suffix-icon="el-icon-search"/>
                    </el-col>
                    <el-col :span="12">
                        <el-button-group style="float: right;">
                            <el-button type="primary"><i class="iconfont icon-refresh" tip="刷新"/></el-button>
                            <el-button type="primary"><i class="iconfont icon-biaoge" tip="卡片"/></el-button>
                            <el-button type="primary"><i class="iconfont icon-tubiao" tip="图表"/></el-button>
                            <el-button type="primary"><i class="iconfont icon-refresh"/></el-button>
                            <el-button type="primary"><i class="iconfont icon-download"/></el-button>
                            <el-button type="primary"><i class="iconfont icon-upload"/></el-button>
                        </el-button-group>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            show-summary
            height="600"
            style="width: 100%"
            highlight-current-row>
            <el-table-column type="selection" fixed width="55" align="center"/>>
            <el-table-column align="center" fixed label="ID" width="95" sortable>
                <template slot-scope="scope">
                    {{ scope.$index }}
                </template>
            </el-table-column>
            <el-table-column :align="align" width="150" label="ORGDEPARTMENT_CNAME">
                <template slot-scope="scope">
                    <span>{{ scope.row.ORGDEPARTMENT_CNAME }}</span>
                </template>
            </el-table-column>
            <el-table-column label="ORGDEPARTMENT_COMPID_DICTNAME" width="150" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.ORGDEPARTMENT_COMPID_DICTNAME }}</span>
                </template>
            </el-table-column>
            <el-table-column
                :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
                :filter-method="filterDateHandler"
                label="ORGDEPARTMENT_CREATEDATE_NEWDATE"
                align="center"
                width="200"
                sortable>
                <template slot-scope="scope">
                    {{ scope.row.ORGDEPARTMENT_CREATEDATE_NEWDATE }}
                </template>
            </el-table-column>
            <el-table-column class-name="status-col" label="ORGDEPARTMENT_DEPCODE" align="center" width="200">
                <template slot-scope="scope">
                    <el-tag>{{ scope.row.ORGDEPARTMENT_DEPCODE }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="created_at" label="ORGDEPARTMENT_DEPGRADE_DICTNAME" width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"/>
                    <span>{{ scope.row.ORGDEPARTMENT_DEPGRADE_DICTNAME }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="created_at" label="ORGDEPARTMENT_DEPGRADE_DICTNAME" width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"/>
                    <span>{{ scope.row.ORGDEPARTMENT_DEPGRADE_DICTNAME }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="created_at" label="ORGDEPARTMENT_DEPGRADE_DICTNAME" width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"/>
                    <span>{{ scope.row.ORGDEPARTMENT_DEPGRADE_DICTNAME }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="created_at" label="ORGDEPARTMENT_DEPGRADE_DICTNAME" width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"/>
                    <span>{{ scope.row.ORGDEPARTMENT_DEPGRADE_DICTNAME }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="created_at" label="ORGDEPARTMENT_DEPGRADE_DICTNAME" width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"/>
                    <span>{{ scope.row.ORGDEPARTMENT_DEPGRADE_DICTNAME }}</span>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container" style="margin-top: 10px;">
            <el-pagination
                :current-page="pager.offset"
                :page-sizes="[5, 10, 50, 100]"
                :page-size="pager.limit"
                :total="totalData"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>
        </div>

        <!-- 新增/编辑弹出层 -->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
                <el-form-item :label="$t('table.type')" prop="type">
                    <el-select v-model="temp.type" class="filter-item" placeholder="Please select">
                        <el-option v-for="item in selectdata" :key="item.code" :label="item.name" :value="item.code"/>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('table.date')" prop="timestamp">
                    <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date"/>
                </el-form-item>
                <el-form-item :label="$t('table.title')" prop="title">
                    <el-input v-model="temp.title"/>
                </el-form-item>
                <el-form-item :label="$t('table.importance')">
                    <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;"/>
                </el-form-item>
                <el-form-item :label="$t('table.remark')">
                    <el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.remark" type="textarea" placeholder="Please input"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
                <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">{{ $t('table.confirm') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { cardformInitData, queryCardFormColumnsWithUserId } from '@/api/api'
const calendarTypeOptions = [
    { key: 'CN', display_name: 'China' },
    { key: 'US', display_name: 'USA' },
    { key: 'JP', display_name: 'Japan' },
    { key: 'EU', display_name: 'Eurozone' }
]
export default {
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: 'success',
                draft: 'gray',
                deleted: 'danger'
            }
            return statusMap[status]
        }
    },
    data() {
        return {
            list: null,
            column: ['ORGDEPARTMENT_COMPID', 'ORGDEPARTMENT_PARENTID', 'ORGDEPARTMENT_FININSTITU', 'ORGDEPARTMENT_DEPKINDMOJ_DICTNAME', 'ORGDEPARTMENT_DEPCOST', 'ORGDEPARTMENT_DEPID', 'ORGDEPARTMENT_ZUID', 'ORGDEPARTMENT_DEPCODE', 'ORGDEPARTMENT_ENAME', 'ORGDEPARTMENT_WEBNUM', 'ORGDEPARTMENT_MANAGEREGION', 'ORGDEPARTMENT_DEPTYPE_DICTNAME', 'ORGDEPARTMENT_CNAME', 'ORGDEPARTMENT_DEPAREA', 'ORGDEPARTMENT_DEPGRADE_DICTNAME', 'ORGDEPARTMENT_DEPGROUP5', 'ORGDEPARTMENT_DEPGROUP4', 'ORGDEPARTMENT_XORDER', 'ORGDEPARTMENT_DEPGROUP3', 'ORGDEPARTMENT_DEPGROUP2', 'ORGDEPARTMENT_DEPGROUP1', 'ORGDEPARTMENT_HANGLEADER', 'ORGDEPARTMENT_COMPID_DICTNAME', 'ORGDEPARTMENT_ISPROTECT_DICTNAME', 'ORGDEPARTMENT_DIRECTOR', 'ORGDEPARTMENT_DEPKINDMOJ', 'ORGDEPARTMENT_LEADERSHIP', 'ORGDEPARTMENT_LEADER', 'ORGDEPARTMENT_ISFININSTITU_DICTNAME', 'ORGDEPARTMENT_ISDISABLED_DICTNAME', 'ORGDEPARTMENT_ISDISABLED', 'ORGDEPARTMENT_CREATEDATE', 'ORGDEPARTMENT_ISALLOW_DICTNAME', 'ORGDEPARTMENT_ORGCODE', 'ORGDEPARTMENT_DEPCOST_DICTNAME', 'ORGDEPARTMENT_UPDATETIME_NEWDATE', 'PAGE_ROW_NUMBER', 'ORGDEPARTMENT_HANGLEADER_DICTNAME', 'ORGDEPARTMENT_PARENTID_DICTNAME', 'ORGDEPARTMENT_DEPKIND_DICTNAME', 'ORGDEPARTMENT_UPDATETIME', 'ORGDEPARTMENT_LEADERSHIP_DICTNAME', 'ORGDEPARTMENT_LEADER_DICTNAME', 'ORGVORGANIZATION_ORGCODE', 'ORGDEPARTMENT_DEPKIND', 'ORGDEPARTMENT_PROAGENCCODE', 'ORGDEPARTMENT_ISPROTECT', 'ORGDEPARTMENT_ISALLOW', 'ORGDEPARTMENT_DEPTYPE', 'ORGDEPARTMENT_REMARK', 'ORGDEPARTMENT_DEPAREA_DICTNAME', 'ORGDEPARTMENT_DIRECTOR_DICTNAME', 'ORGDEPARTMENT_DEPGRADE', 'ORGDEPARTMENT_CREATEDATE_NEWDATE', 'ORGDEPARTMENT_ISFININSTITU', 'ORGDEPARTMENT_HRSPECIALIST', 'ORGDEPARTMENT_MANAGEREGION_DICTNAME'],
            listLoading: true,
            align: 'center',
            width: 200,
            // 搜索框
            search: '',
            // 分页数据
            totalData: -1,
            pager: { offset: 0, limit: 10 },
            // 多选的数据
            multipleSelection: [],
            // 临时数据
            temp: {
                id: undefined,
                importance: 1,
                remark: '',
                timestamp: new Date(),
                title: '',
                type: '',
                status: 'published'
            },
            // 弹层是否显示
            dialogFormVisible: false,
            // 弹层的状态 新增or编辑
            dialogStatus: '',
            textMap: {
                update: 'Edit',
                create: 'Create'
            },
            // 表单验证规则
            rules: {
                type: [{ required: true, message: 'type is required', trigger: 'change' }],
                timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
                title: [{ required: true, message: 'title is required', trigger: 'blur' }]
            },
            calendarTypeOptions,
            selectdata: []
        }
    },
    created() {
        this._cardformInitData()
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
            this.pager.limit = val
            this._cardformInitData()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`)
            this.pager.offset = val
            this._cardformInitData()
        },
        handleSelectionChange(val) {
            console.log(val)
            this.multipleSelection = val
        },
        // 检查是否只有一条数据
        checkSingleSelection() {
            console.log(this.multipleSelection.length)
            if (this.multipleSelection.length === 1) {
                return Promise.resolve(this.multipleSelection[0])
            } else {
                return Promise.reject()
            }
        },
        filterDateHandler(value, row, column) {
            const property = column['property']
            return row[property] === value
        },
        resetTemp() {
            this.temp = {
                id: undefined,
                importance: 1,
                remark: '',
                timestamp: new Date(),
                title: '',
                status: 'published',
                type: ''
            }
        },
        handleAdd() {
            this.resetTemp()
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        createData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    setTimeout(() => {
                        // this.list.unshift(this.temp)
                        this.dialogFormVisible = false
                        this.$notify({
                            title: '成功',
                            message: '创建成功',
                            type: 'success',
                            duration: 2000
                        })
                    }, 2000)
                }
            })
        },
        handleUpdate(row) {
            this.temp = Object.assign({}, row) // copy obj
            this.temp.timestamp = new Date(this.temp.timestamp)
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        updateData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const tempData = Object.assign({}, this.temp)
                    tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
                    setTimeout(() => {
                        this.dialogFormVisible = false
                        this.$notify({
                            title: '成功',
                            message: '更新成功',
                            type: 'success',
                            duration: 2000
                        })
                    }, 2000)
                }
            })
        },
        _cardformInitData() {
            cardformInitData()
                .then((res) => {
                    console.log(res)
                    this.totalData = res.total
                    this.list = res.rows
                    this.column = Array.from(Object.keys(res.rows[0]))
                    console.log(this.column)
                    this.listLoading = false
                })
        },
        _queryCardFormColumnsWithUserId() {
            queryCardFormColumnsWithUserId()
                .then((res) => {
                    console.log(res)
                })
        }
    }
}
</script>
